<div class="permission">
    <nz-table [nzData]="permissions" #permList>
        <thead>
            <tr>
                <th nzWidth="300px">Group name</th>
                <th nzWidth="300px">Group permission</th>
                <th nzWidth="50px">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let gp of permList.data">
                <td>
                    <a [routerLink]="['/settings/group', gp.group.name]">{{ gp.group.name }}</a>
                </td>
                <td>
                    <div *ngIf="edit;then wPermission;else rPermission"></div>
                    <ng-template #wPermission>
                        <nz-select [nzDisabled]="gp.updating" [(ngModel)]="gp.permission"  (ngModelChange)="pushChange();gp.hasChanged = true">
                            <nz-option *ngFor="let pp of permissionsList" [nzValue]="pp.value" nzLabel="{{pp.name | translate}}"></nz-option>
                        </nz-select>
                    </ng-template>
                    <ng-template #rPermission>
                        {{ getPermissionName(gp.permission) | translate }}
                    </ng-template>
                </td>
                <td>
                    <ng-container *ngIf="edit">
                        <button nz-button nzType="primary" *ngIf="mode === 'submit' && gp.hasChanged" [nzLoading]="gp.updating"
                                 [disabled]="gp.updating" name="btnupdateperm"
                                (click)="sendEvent('update', gp)">
                            <i nz-icon nzType="save" nzTheme="outline"></i>
                            {{ 'btn_save' | translate}}
                        </button>
                        <ng-container *ngIf="mode === 'form'">
                            <button nz-button  nzType="primary" nzDanger [nzLoading]="gp.updating" (click)="sendEvent('delete', gp)">
                                <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
                            </button>
                        </ng-container>
                        <ng-container *ngIf="mode === 'submit' && !gp.hasChanged">
                            <button nz-button nzType="primary" nzDanger [nzLoading]="gp.updating" name="deleteButton"
                                    nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this permission ?"
                                    (nzOnConfirm)="sendEvent('delete', gp)" nzPopconfirmPlacement="topLeft">
                                <i nz-icon nzType="delete" nzTheme="outline"></i>Delete
                            </button>
                        </ng-container>
                    </ng-container>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>
